<template>
    <el-row :gutter="20" style="margin-bottom: 10px;">
        <el-col :span="3" >
            <el-button size="large"  @click="dishSaleSort('day')" >日销量</el-button>            
        </el-col>
        <el-col :span="3" >           
            <el-button size="large"  @click="dishSaleSort('month')" >月销量</el-button>
        </el-col>
        <el-col :span="3" >           
            <el-button size="large"  @click="dishSaleSort('year')">年销量</el-button>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="6" v-for="dish in dishes" :key="dish.dishId">
            <el-card :body-style="{ padding: '0px' }" >
                <el-image
                :src="'http://localhost:8081/'+dish.imageName" 
                class="image" width="100%" fit="contain" />
                <el-row style="height: 36px;line-height: 36px;margin-top: -6px" >
                    <el-col :span="17" :offset="1">{{dish.dishName}}</el-col>
                    <el-col :span="6">销量: {{dish.count}}</el-col>
                </el-row>   
            </el-card>
        </el-col>           
    </el-row>
</template>

<script setup>
import { onBeforeMount,ref,getCurrentInstance} from 'vue';
import { useStore } from '@/stores'


const { proxy } = getCurrentInstance()
const store = useStore()

const dishes=ref([])

onBeforeMount(async ()=>{
    dishSaleSort('day')
})

async function dishSaleSort(sortType){

    let { data: res} = await proxy.$http({
            method:'get',
            headers: {
            'Authorization': store.token	//	可以是授权凭证用的参数值
            },
            url:`/api/admin/dishSaleSort/${sortType}`
    })
    console.log(res)
    dishes.value=res.data
}
</script>
<style scoped>
.el-col{
    font-weight: 900;
}

.el-card{
    margin-bottom: 10px;
    position: relative;
}
.el-col .active{
    background: rgb(253,95,32);
    color: #fff;
}
.el-card .el-button{
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
    background: rgb(253,95,32);
    color: #fff;
}
</style>